<template>
	<view>
		<view class="header">
			<button class="custom-style cu-btn bg-blue square shadow" @click="changeStatus">管理</button>
		</view>
		<view class="my_body">
			<view v-for="(item,index) in items" :key="index" :data-index="index" @click='showDetail(e)'>
				<view class="my_body_1">
					<u-checkbox-group class="my_middle" v-if="isHided">
						<u-checkbox v-model="checked" shape="square"></u-checkbox>
					</u-checkbox-group>
					<uni-swipe-action class="content">
						<!-- 这种是最常用的 -->
						<uni-swipe-action-item :right-options="options" @click="bindClick"
							@change="swipeChange($event, index)">
							<view>
								<view class="cu-bar">
								<view class="action sub-title">
				  				<text class="text-xl text-bold text-blue">具体时分</text>
										<text class="text-ABC text-blue">Personal</text>
									</view>
								</view>

								<view class="view_3">
									<text>具体内容</text>
								</view>
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
			</view>
		</view>
		<view class="bottom">
			<button class="bottom_1 cu-btn bg-blue square shadow">分配</button>
		</view>
	</view>
</template>

<script>
	//我的思路是给他加上去，使用v-if让他不显示出来
	export default {
		components: {

		},

		data() {
			return {
				isHided: false,
				items: [{
						message: 'Foo'
					},
					{
						message: 'Bar'
					}
				],
				show: false,
				keyword: '',
				options: [{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				value: [{
					name: '黑马'
				}],
			}
		},
		methods: {
			changeStatus() {
				this.isHided = !this.isHided
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.my_body_1 {
		display: flex;
		flex-direction: row;
		margin-left: 40rpx;
	}
	
	.content {
		display: flex;
		background-color: #FFFFFF;
		margin: 20upx;
		margin-left: 10upx;
		padding-left: 0upx;
		width: 600rpx;
		border-radius: 15upx;
		z-index: 50;
	}

	.custom-style {
		//float和margin-left很好用
		display: flex;
		margin-left: 580rpx;
		margin-top: 20rpx;
		margin-right: 50rpx;
		height: 60rpx;
		font-size: 35rpx;
	}

	.header {
		display: flex;
		flex-direction: row;
		font-size: 50rpx;
	}

	.view_3 {
		padding-left: 40rpx;
		width: 100vw;
		height: 60upx;
	}

	.footer {
		display: flex;
		flex-direction: column;
		width: 90rpx;
		height: 90rpx;
		bottom: 40rpx;
		margin-left: 45%;
	}

	.myfooter {
		font-size: 30rpx;
	}
	
	.bottom {
		background-color: #FFFFFF;
		display: flex;
		margin-left: 25vw;
		height: 70rpx;
		font-size: 35rpx;
		position: fixed;
		bottom: 30rpx;
		width: 50%;
		
		.bottom_1 {
			//水平居中，要在盒子内使用 
			margin: 0 auto;
		}
		
	}
</style>
